<template>
  <div>
    <vue-particles
      id="tsparticles"
      :particlesInit="pInit"
      :particlesLoaded="pLoaded"
      :options="pConfig"
    />
    <div class="form-container">
      <h3>企业门户网站管理系统</h3>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        status-icon
        :rules="loginRules"
        label-width="80px"
        class="login-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm()">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const loginForm = reactive({
  username: "",
  password: "",
});
const loginFormRef = ref();

const loginRules = reactive({
  username: {
    required: true,
    message: "请输入用户名",
    trigger: "blur",
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: "blur",
  },
});

const router = useRouter();

const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      localStorage.setItem("node-vue3-token", "evabc");
      router.push({
        path: "/",
      });
    }
  });
};

const resetForm = () => {
  Object.keys(loginForm).forEach((item) => {
    loginForm[item] = "";
  });
};
// particle.vue3引入
import {
  particlesConfig,
  particlesInit,
  particlesLoaded,
} from "../assets/js/particles-config"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
const pConfig = reactive(particlesConfig);
const pLoaded = reactive(particlesLoaded);
const pInit = reactive(particlesInit);
</script>

<style lang="scss" scoped>
.form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background: #00000050;
  text-align: center;
  padding: 20px;
  h3 {
    font-size: 30px;
    color: #fff;
  }
  .login-form {
    margin-top: 20px;
  }
}

::v-deep .el-form-item__label {
  color: #fff;
}
</style>
